<template>
	<view class="content">
		<!-- 发票信息 -->
		<view class="invoice-info box">
			<text class="section-title">发票信息</text>
			<view class="info-row">
				<text>发票内容</text>
				<text class="info-value">租车费|用车平台服务费</text>
			</view>
			<view class="info-row arrow-right" @tap="selectCompany">
				<text>发票抬头</text>
				<view class="info-value-wrapper">
					<text class="info-value">深圳起运智联供应链科技有限公司</text>
					<u-icon name="arrow-right" size="14" color="#AAAAAA"></u-icon>
				</view>
			</view>
			<view class="info-row">
				<text>纳税人识别号</text>
				<text class="info-value">91440300MA5GYT8Q90</text>
			</view>
			<view class="info-row">
				<text>开票金额</text>
				<text class="info-value price">¥1131.00</text>
			</view>
		</view>

		<!-- 发票信息 -->
		<view class="email-info box">
			<text class="section-title">发票信息</text>
			<view class="info-row">
				<text>邮箱号</text>
				<input type="text" class="info-value" placeholder="请输入邮箱" v-model="email" style="text-align: right; placeholder-style: 'color: #AAAAAA; font-size: 28rpx;'" />
			</view>
		</view>

		<!-- 确认开票按钮 -->
		<view class="confirm-btn" @tap="confirmInvoice">
			确认开票
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			selectCompany() {
				// 选择发票抬头
			},
			confirmInvoice() {
				// 确认开票
                uni.navigateTo({    
                    url: '/pages/order/invoice-result'
                })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		background-color: #F5F5F5;
		min-height: 100vh;
	}

	.box {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		display: block;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		border-bottom: 1px solid #F5F5F5;
		
		&.arrow-right {
			.info-value-wrapper {
				display: flex;
				align-items: center;
				
				.info-value {
					margin-right: 10rpx;
				}
			}
		}

		.info-value {
			color: #AAAAAA;
			
			&.price {
				color: #FC0A01;
				font-weight: bold;
			}
		}
	}

	.confirm-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		background: #1C6EFB;
		color: #fff;
		text-align: center;
		padding: 25rpx 0;
		border-radius: 50rpx;
		font-size: 32rpx;
	}
</style> 